@charset 'utf-8';

@import 'reset';

input{
   -webkit-appearance: none;
   appearance: none;
}

html,body,.web{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.web{
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
}

.lottery-page{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    >img{
        width: 100%;
        height: 100%;
    }
    .be-opend-red-bag{
        width: r(417px);
        height: r(408px);
        position: absolute;
        left: 50%;
        top: 12.4%;
        margin-left: r(-208.5px);
        >img{
            width: 90%;
            height: auto;
            margin-left: 7%;
        }
    }
    p{
        width: r(443px);
        height: r(96px);
        font-size: r(24px);
        color: white;
        text-align: center;
        position: absolute;
        left: 50%;
        bottom: 17%;
        margin-left: r(-221.5px);
    }
    .lottery-btn-group{
        width: r(466px);
        height: r(66px);
        position: absolute;
        left: 50%;
        bottom: 10%;
        margin-left: r(-233px);
        span{
            width: r(227px);
            height: r(66px);
            >img{
                width: 100%;
                height: 100%;
            }
        }
        span:first-of-type{
            float: left;
        }
        span:last-of-type{
            float: right;
        }
    }
}

.open-red-bag{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
//  display: none;
    >img{
        width: 100%;
        height: 100%;    
    }
    .not-open-red-bag{
        width: r(362px);
        height: r(563px);
        position: absolute;
        left: 50%;
        top: 20%;
        margin-left: r(-181px);
        >img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        width: r(405px);
        height: r(37px);
        font-size: r(24px);
        line-height: r(37px);
        text-align: center;
        color: white;
        position: absolute;
        left: 50%;
        bottom: 14.3%;
        margin-left: r(-202.5px);
    }
}


.shake{
    animation: shaking 300ms ease-in 150ms;
}

@keyframes shaking{
    0%{
      transform: rotateZ(0deg);  
    }
    
    25%{
        transform: rotateZ(-15deg);
    }
    
    50%{
        transform: rotateZ(0deg);
    }
    
    75%{
        transform: rotateZ(15deg);
    }
    
    100%{
        transform: rotateZ(0deg);
    }
}


.lottery-record{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    overflow: hidden;
    z-index: 80;
    >img{
        width: 100%;
        height: 100%;
    }
    p{
        width: r(509px);
        height: r(215px);
        position: absolute;
        left: 50%;
        top: 20.7%;
        margin-left: r(-254.5px);
        >img{
            width: 100%;
            height: auto;
        }
    }
    .name,.tel{
        width: r(431px);
        height: r(61px);
        position: absolute;
        left: 50%;
        font-size : 0;
        margin-left: r(-215.5px);
        input{
           width: r(321px);
           height: r(61px); 
           vertical-align: top;
           border: none;
           background-color: #f2d089;
        }
        span{
            display: inline-block;
            width: r(100px);
            height: r(61px);
        };
    }
    
    .name{
        top: 43.6%;
        background: url(../img/lottery/name_bg.png) 0 0 no-repeat;
        background-size: cover;
    }
    
    .tel{
        top: 52.2%;
        background: url(../img/lottery/tel_bg.png) 0 0 no-repeat;
        background-size: cover;
    }
    
    .record-btn{
        width: r(466px);
        height: r(65px);
        position: absolute;
        left: 50%;
        bottom: 18.9%;
        margin-left: r(-233px);
        a{
            display: inline-block;
            float: left;
            width: r(227px);
            height: r(65px);
            img{
                width: 100%;
                height: auto;
            }
        }
        .submit{
            float: right;
            width: r(227px);
            height: r(65px);
            img{
                width: 100%;
                height: auto;
            }
        }
    }
}
